<template>
  <el-card class="box-card">
    <div slot="header">
      <span>{{ title }}</span>
      <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
    </div>
    <template v-if="list.length > 0">
      <ul class="list-header">
        <li>{{ headerTexts[0] }}</li>
        <li>{{ headerTexts[1] }}</li>
        <li>{{ headerTexts[2] }}</li>
      </ul>
      <ul v-for="(item, index) in list" :key="index" class="list-content">
        <li>
          <el-image
            v-if="index < 3"
            :src="require('../../../assets/images/icon-rank' + (index + 1) + '.png')"
            fit="fill"
          />
          <span v-else class="image-span" />
          {{ index + 1 }}
        </li>
        <li>{{ item.name }}</li>
        <li> <span class="app-link" @click="gotoList(item)">{{ item.indicator }}</span> </li>
      </ul>
    </template>
    <el-empty v-else description="暂无数据" />

  </el-card>
</template>

<script>
export default {
  name: 'CardList',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => []
    },
    headerTexts: {
      type: Array,
      default: () => ['排名', '姓名', '金额（元）']
    },
    path: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'user'
    },
    dateType: {
      type: [String, Number],
      default: 'user'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    gotoList(item) {
      if (this.type === 'customer') {
        this.gotoMainPage(this.path, {
          dateType: this.dateType,
          status: 3,
          customerId: item.customerId,
          searchTimeFlag: 2

        })
        return
      }
      const query = {
        dateType: this.dateType,
        createBy: item.createBy,
        status: 3,
        searchTimeFlag: 2

      }
      if (this.path === 'customer') {
        query.status = 1
      }
      this.gotoMainPage(this.path, query)
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    height: 395px;
  }
  .list-header,
  .list-content{
    list-style: none;
    padding: 12px 0;
    margin: 0;
    li {
      display: inline-block;
      width: 33%;
      padding-left: 16px;
      .el-image {
        vertical-align: middle;
      }
      .image-span {
        display: inline-block;
        width: 32px;
      }
    }
  }
  .list-header {
    background-color: #f3f4f8;
  }
</style>
